<%@ page pageEncoding="utf-8" isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>校园超市管理系统</title>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/js/jQuery1.11.1.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require(['echarts', 'echarts/chart/bar', 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
        ], drewEcharts);

        function drewEcharts(ec) {
            var myCheck = ec.init(document.getElementById("main"));
            option = {
                title: {
                    text: '金额分布图',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['金额']
                },
                toolbox: {
                    show: true,
                    feature: {
                        /*辅助线*/
                        mark: {show: true},
                        /*数据视图*/
                        dataView: {show: true, readOnly: false},
                        /*视图切换*/
                        magicType: {show: true, type: ['line', 'bar']},
                        /*刷新按钮*/
                        restore: {show: true},
                        /*保存为图片*/
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLabel: {
                            interval: 0,
                            formatter:function(value)
                            {
                                debugger
                                var ret = "";//拼接加\n返回的类目项
                                var maxLength = 2;//每项显示文字个数
                                var valLength = value.length;//X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1)//如果类目项的文字大于3,
                                {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = "";//每次截取的字符串
                                        var start = i * maxLength;//开始截取的位置
                                        var end = start + maxLength;//结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                }
                                else {
                                    return value;
                                }
                            }
                        },
                        /*坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。*/
                        boundaryGap: true,
                        data: (function () {
                            var arr = [];
                            $.ajax({
                                type: "post",
                                async: false, //同步执行
                                url: "${pageContext.request.contextPath}/product/productechart",
                                dataType: "json", //返回数据形式为json
                                success: function (data) {
                                    if (data.data != null) {
                                        for (var i = 0; i < data.data.length; i++) {
                                            arr.push(data.data[i].name);
                                        }
                                    }
                                },
                            });
                            return arr;
                        })()
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        /*y轴坐标轴刻度显示*/
                        axisLabel: {
                            formatter: '{value}元'
                        }
                    }
                ],
                series: [
                    {
                        name: '金额',
                        type: 'line',
                        data: (function () {
                            var arr = [];
                            $.ajax({
                                type: "post",
                                async: false, //同步执行
                                url: "${pageContext.request.contextPath}/product/productechart",
                                data: {},
                                dataType: "json", //返回数据形式为json
                                success: function (result) {
                                    if (result.data) {
                                        for (var i = 0; i < result.data.length; i++) {
                                            arr.push(result.data[i].price);
                                        }
                                    }
                                },

                            });
                            return arr;
                        })(),
                        /*图表标注。*/
                        markPoint: {
                            data: [
                                {type: 'max', name: '最贵的'},
                                {type: 'min', name: '最便宜的'}
                            ]
                        },
                        /*图表标线。*/
                        markLine: {
                            data: [
                                {type: 'average', name: '平均价格'}
                            ]
                        }
                    }]
            };
            myCheck.setOption(option);
        }
    </script>
</head>
<body>
<div id="main" style="width: 1450px;height:650px;"></div>
</body>
</html>